<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>这是通过p标签渲染的组件</p>
    </div>
    <!-- 如何在webpack中，使用Vue -->
    <!-- 1.组件 2.路由 -->
    <script src="js/vue.js"></script>
    <script>
        var login = {
            template:'<h1>这是一个登录组件</h1>'
        }
        var vm = new Vue({
            el:'#app',
            data:{
                
            },
            render:function(createElement){ //render函数是Vue的成员，他是另外一种渲染组件的方式
                 //createElement函数本身是有返回值的，render函数也是要求有返回值的，所以在
                // render函数内，必须把createElement()函数的返回值，用return返回
               return createElement(login);
            }
        })
        // render函数它会整体替换app视图
        // render函数，一般用来渲染一个页面中的根组件，一般情况下跟组件是当做一个容器来使用的，尤其是
        // 在单页面应用程序中
    </script>
</body>
</html>